<template>
  <div class="list">
    <el-table
      :data="upTableData"
      border
      highlight-current-row
      @current-change="exchangeFriend"
      height="584"
      style="width: 100%;margin-top: 9px">
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            placeholder="搜索好友"
            prefix-icon="el-icon-search"
            size="small"
            @change="searchFriends"/>
        </template>
        <template v-slot="{ row }">
            <div style="float: left;width: 20%">
              <img :src= source+row.avatar style="height: 50px;width: 50px;border-radius: 25px">
            </div>
            <div style="float: right;width: 70%;height: 30px">
              <div>
                <span>{{ row.userName }}</span>
                <span style="font-size: 12px;float: right">{{ row.lastTime }}</span>
              </div>
              <div style="margin-top: 5px">
                <span style="font-size: 12px;">{{ row.lastMessage }}</span>
              </div>
            </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {cmsGetListHistory, cmsListUser} from "@/api/cms/chat";

export default {
  data() {
    return {
      //todo 获取好友列表 (直接获取sys_user表的数据)
      tableData: [],
      source:"http://localhost:8080",
      search: '',
      upTableData: [],
      currentRow: null
    }
  },
  created() {
    this.$bus.$on('sendText',msg => {
      this.upTableData.filter(item => item.userId == msg.message.fromUsername)[0].lastTime=msg.time;
      this.upTableData.filter(item => item.userId == msg.message.fromUsername)[0].lastMessage=msg.message.content;
      })
  },
  mounted() {
    this.getFriendList()
    // this.getHistory()
  },
  methods: {
    getFriendList() {
      cmsListUser().then(res => {
        this.tableData=res.data;
        this.tableData=this.tableData.filter(item => item.userId !==this.$store.state.user.id);
        this.tableData = this.tableData.map(item => ({
          ...item,
          lastTime: '',
          lastMessage: ''
        }));
        this.upTableData=this.tableData;
      })
    },
    // getHistory(){
    //   const fromUser = 1;
    //   const toUser = 2;
    //   cmsGetListHistory({fromUser, toUser}).then(res =>{
    //     console.log(res)
    //   })
    // },
    exchangeFriend(row) {
      this.$bus.$emit("exchangeFriend", row)
    },
    searchFriends() {
      console.log(this.search)
      if (this.search !=''){
        this.upTableData=this.upTableData.filter(item => item.userName ==this.search);
      }else {
        this.upTableData=this.tableData
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.list {
  background-color: rgba(255, 255, 255, 0);
}

.but {
  text-align: left;
  border: 0;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
}
</style>
